<template>
    <div class="allAariety-body">
        <div class="search-div">
            <div class="search-left">
                <button type="button" class="btn btn-success btn-margin" @click="init(1)">所有品种</button>
                <button type="button" class="btn btn-success btn-margin" data-toggle="modal"
                        data-target=".bs-AarietyModal-modal-lg" @click="ChooseModal(1)">添加品种
                </button>
            </div>
            <div class="search-right">
                <div class="input-radio">
                    <input type="radio" id="1" checked="checked" value="1" v-model="search_id">
                    <label for="1">名称</label>
                    <input type="radio" id="2" value="2" v-model="search_id">
                    <label for="2">描述</label>
                </div>
                <div class="input-button">
                    <div class="form-inline">
                        <div class="form-group">
                            <div class="input-group">
                                <input type="text" class="form-control" placeholder="搜索" v-model="search_text">
                            </div>
                        </div>
                        <button type="submit" class="btn btn-success" @click="init(2, search_text)">搜索品种</button>
                    </div>
                </div>
                <div style="clear: both"></div>
            </div>
        </div>
        <div class="table-div">
            <table class="table table-hover table-condensed table-bordered">
                <tr class="success">
                    <th class="base-th">品种类型图样</th>
                    <th class="base-th">品种编号</th>
                    <th class="base-th">品种名称</th>
                    <th class="base-th">品种描述</th>
                    <th class="base-th">操作</th>
                </tr>
                <tr v-for="item in items">
                    <td class="img-td"><img :src="item.proImg" alt="{{item.proName}}" class="img-circle"></td>
                    <td>{{item.proID}}</td>
                    <td>{{item.proName}}</td>
                    <td>{{item.proInfo}}</td>
                    <td>
                        <button class="btn btn-success ariety-button" data-toggle="modal" data-target=".bs-AarietyModal-modal-lg"
                                 @click="ChooseModal(2,item.proID)">编辑</button>
                        <button class="btn btn-success ariety-button" @click="toDelete(item.proID)">删除</button>
                    </td>
                </tr>
            </table>
            <div class="footer">
                <div class="nextpage-body">
                    <div class="nextpage-body">
                        <button type="button" class="btn btn-success first-page" @click="nextPage(1)">首页</button>
                        <button type="button" class="btn btn-success pre-page" @click="nextPage(2)">上一页</button>
                        <button type="button" class="btn btn-success next-page" @click="nextPage(3)">下一页</button>
                        <button type="button" class="btn btn-success last-page" @click="nextPage(4)">尾页</button>
                        <span class="panel panel-default page-info">每页 {{rows}} 条，当前页：{{page}}， 总页数： {{count}}</span>
                        <input type="text" class="panel panel-default input-page" placeholder="输入..." v-model="go"/>
                        <button class="btn btn-success submit-page" type="button" @click="setData(go,rows)">跳转</button>
                    </div>
                </div>
            </div>
        </div>

        <!-- 静态模态框 -->
        <div class="modal fade bs-AarietyModal-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="myModalLabel">{{modal.title}}</h4>
                    </div>
                    <div class="modal-body">
                        <div class="row">
                            <div class="col-xs-7">
                                <div class="form-group">
                                    <label for="Aariety-name" class="control-label">品种名称：</label>
                                    <input type="text" class="form-control Aariety-name" id="Aariety-name"
                                           v-model="modal.modal_name">
                                </div>
                                <div class="form-group">
                                    <label for="Aariety-info" class="control-label">品种简介：</label>
                                    <textarea class="form-control Aariety-info" id="Aariety-info"
                                              v-model="modal.modal_info"></textarea>
                                </div>
                            </div>
                            <div class="col-xs-5">
                                <img :src="modal.addImg" class="img-thumbnail Aariety-img" @click="uploadImg()">
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-success" @click="SubmitModal()">确定</button>
                        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    require('../assets/css/viewModels/allAariety.less');
    require('../util/modal');   // 导入Jquery插件:模态框
    var plus = require('../assets/images/plus.png');
    module.exports = {
        data: function () {
            return {
                items: [],
                remoteData: [],
                page: 1,
                rows: 10,
                count: 0,
                search_id: 1,
                search_text: '',
                modal: {
                    title: '添加品种',
                    addImg: plus,
                    modal_name: '',
                    modal_info: '',
                    modal_code: '',
                    choose: ''
                }
            }
        },
        ready: function () {
            this.init(1);
        },
        methods: {
            // option ：1-全部，2-品种名
            init: function (choose, args) {
                var _this = this;
                if (choose == '1') {
                    var url = '/Product/findall';
                    $.post(url).then(function (data) {
                        // 初始化配置信息
                        var temp = data.content.count / _this.rows;
                        _this.count = parseInt(temp);
                        if (temp > _this.count) {
                            _this.count++;
                        }
                        _this.page = 1;
                        _this.rows = 10;
                        // 保存远程数据
                        _this.remoteData = data.content.list;
                        _this.setData(_this.page, _this.rows);
                    });
                }
                if (choose == '2') {
                    var url = '';
                    var objArgs = {};
                    if (_this.search_id == '1') {
                        objArgs = {"typename": args};
                        url = '/Product/findbytypename';
                    } else {
                        objArgs = {"typeinfo": args};
                        url = '/Product/findbytypeinfo';
                    }
                    $.post(url, objArgs).then(function (data) {
                        // 初始化配置信息
                        var temp = data.content.count / _this.rows;
                        _this.count = parseInt(temp);
                        if (temp > _this.count) {
                            _this.count++;
                        }
                        _this.page = 1;
                        _this.rows = 10;
                        // 保存远程数据
                        _this.remoteData = data.content.list;
                        _this.setData(_this.page, _this.rows);
                    });
                }
            },
            nextPage: function (sw) {
                var _this = this;
                switch (sw) {
                    case 1:
                        _this.page = 1;
                        _this.setData(_this.page, _this.rows);
                        break;
                    case 2:
                        if (_this.page > 1) {
                            _this.page--;
                        }
                        _this.setData(_this.page, _this.rows);
                        break;
                    case 3:
                        if (_this.page < _this.count) {
                            _this.page++;
                        }
                        _this.setData(_this.page, _this.rows);
                        break;
                    case 4:
                        _this.page = _this.count;
                        _this.setData(_this.page, _this.rows);
                        break;
                }
            },
            setData: function (page, rows) {
                var _this = this;
                var list = _this.remoteData;
                // 清空当前数据
                _this.items = [];
                if (page < 1) {
                    page = 1;
                }
                if (page > _this.count) {
                    page = _this.count;
                }
                var index = (page - 1) * rows;
                // 每页10条记录
                for (var i = index; i < list.length && i < (index + rows); i++) {
                    var obj = {};
                    obj.proID = list[i].proID;
                    obj.proImg = list[i].proImg;
                    obj.proName = list[i].proName;
                    obj.proInfo = list[i].proInfo;
                    _this.items.push(obj);
                }
            },
            toDelete: function (arg) {
                var _this = this;
                var url = '/Product/delete';
                if (window.confirm("确定删除？？？")) {
                    $.post(url, {"typecode": arg}).then(function (data) {
                        (function () {
                            // 刷新页面
                            window.location.reload();
                        }(alert("删除成功")));
                    });
                }
            },
            uploadImg: function () {
                var AsyncUploadFile = require('../util/AsyncUpload');
                var _this = this;
                AsyncUploadFile.upload({
                    //上传文件接收地址
                    uploadUrl: "/api/planb/productImgUpload",
                    //选择文件后，发送文件前自定义事件
                    //file为上传的文件信息，可在此处做文件检测、初始化进度条等动作
                    beforeSend: function (file) {

                    },
                    //文件上传完成后回调函数
                    //res为文件上传信息
                    callback: function (res) {
                        var data = JSON.parse(res);
                        if (data.status == 'error') {
                            alert(data.msg);
                        } else {
                            _this.modal.addImg = data.msg;
                        }
                    },
                    //返回上传过程中包括上传进度的相关信息
                    //详细请看res,可在此加入进度条相关代码
                    uploading: function (res) {

                    }
                });
            },
            ChooseModal: function (choose, args) {
                var _this = this;
                _this.modal.modal_name = '';
                _this.modal.modal_info = '';
                _this.modal.addImg = plus;
                if (choose == '1') {
                    _this.modal.title = '添加品种';
                    _this.modal.choose = 1;
                }
                if (choose == '2') {
                    _this.modal.title = '编辑品种信息';
                    _this.modal.choose = 2;
                    $.post('/Product/findbyid', {"typecode": args}).then(function (data) {
                        _this.modal.addImg = data.content.proImg;
                        _this.modal.modal_name = data.content.proName;
                        _this.modal.modal_info = data.content.proInfo;
                        _this.modal.modal_code = data.content.proID;
                    });
                }
            },
            SubmitModal: function () {
                var _this = this;
                var choose = _this.modal.choose;
                if (choose == '1') {
                    var args = {
                        "typename": _this.modal.modal_name,
                        "profileimg": _this.modal.addImg,
                        "typeinfo": _this.modal.modal_info
                    };
                    $.post('/Product/addProduct', args).then(function (data) {
                        if (data.status == 'success') {
                            alert('添加成功！');
                            window.location.reload();
                        }
                    });
                }
                if (choose == '2') {
                    var args = {
                        "id": _this.modal.modal_code,
                        "typename": _this.modal.modal_name,
                        "typeimg": _this.modal.addImg,
                        "typeinfo": _this.modal.modal_info
                    };
                    $.post('/Product/updateProduct', args).then(function (data) {
                        alert('修改成功！');
                        window.location.reload(); // 刷新页面
                    });
                }
            }
        },
        components: {
            'topnav': require('../components/topnav.vue'),
            'nextpage': require('../components/nextpage.vue')
        }
    }
</script>
